<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Importation de fichier csv en EXCEL</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <style type="text/css">
            #result{
                border: solid 1px #e3e3e3;
                border-radius: 5px;
                padding: 5px;
                margin: 5px auto;
                background: #e2fffc;
            }
        </style>
    </head>
    <body class="container">
        <div class="content-head">
            <h2>Importation CSV en MySQL</h2>
        </div>
        <form action='loader.php' method="post" id='form-data' class="well well-large">
            <label>
                <span>Données CSV</span>
                <textarea id='data' name="data" cols="100" rows="10" style="width: 99%" onclick="select();"></textarea>
            </label>
            <button id='submit' class="btn btn-small btn-success">Requete Planning Semaine</button>&nbsp;
            <button id='list' class="btn btn-small btn-inverse">Liste des employés</button>
        </form>
        <hr>
        <button id="select-text" class="btn btn-small btn-info">Sélectionner les requêtes SQL</button>
        <div id="loader" class="hide">
            <img src="img/ajax-loader.gif">
        </div>
        <div id='result' class="span12">
            ...
        </div>
        <script type="text/javascript">
            $(function() {
                $('#submit').click(function(e) {
                    e.preventDefault();
                    $('#result').hide('fast');
                    $('#loader').show('normal');
                    $ajax = $.ajax({
                        type: 'post',
                        url: 'loader.php',
                        data: $('#form-data').serialize()
                    });
                    $ajax.done(function(result) {
                        $('#result').show('slow').html(result);
                        $('#loader').hide('normal');
                    });
                    $ajax.fail(function() {
                        $('#result').html("Erreur!");
                        $('#loader').hide('normal');
                    });
                });
                $('#select-text').click(function(e) {
                    e.preventDefault();
                    containerid = 'result';
                    if (document.selection) {
                        var range = document.body.createTextRange();
                        range.moveToElementText(document.getElementById(containerid));
                        range.select();
                    } else if (window.getSelection) {
                        var range = document.createRange();
                        range.selectNode(document.getElementById(containerid));
                        window.getSelection().addRange(range);
                    }
                });
                $('#list').click(function(e){
                    e.preventDefault();
                    $('#result').hide('fast');
                    $('#loader').show('normal');
                    $ajax = $.ajax({
                        type: 'post',
                        url : 'list.php',
                        data: $('#form-data').serialize()
                    });
                    $ajax.done(function(result) {
                        $('#result').show('slow').html(result);
                        $('#loader').hide('normal');
                    });
                    $ajax.fail(function() {
                        $('#result').html("Erreur!");
                        $('#loader').hide('normal');
                    });
                });
            });
        </script>
    </body>
</html>
